<template>
	<view>
		<view class="">
			<swiper :indicator-dots="true" style="height: 140px;" indicator-active-color="rgba(200,200,200,0.5)" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image class="banner" :src="item.img" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="banner-bottom">
			<image src="../../static/lawer/lawer_con.png" mode=""></image>
			<view class="line"></view>
			<view class="">
				<view class="">
					南京市，鼓楼区需要查询工商信息，快来接单吧
				</view>
			</view>
		</view>
		<view class="box-line"></view>
		<view class="floor1">
			<view class="title">
				<view class="title-left">
					<image src="../../static/lawer/title_bg.png" mode=""></image>
					<view class="">
						工具
					</view>
				</view>
				<!-- <view class="more">
					查看更多
				</view> -->
			</view>
			<swiper :indicator-dots="true" indicator-active-color="rgba(200,200,200,0.5)" :autoplay="false" :duration="500">
				<swiper-item>
					<view class="box-c">
						<view class="box" @tap="jumpTools(1)">
							<image src="../../static/lawer/susong.png" mode=""></image>
							<view class="">
								诉讼费
							</view>
						</view>
						<view class="box" @tap="jumpTools(2)">
							<image src="../../static/lawer/daikuan.png" mode=""></image>
							<view class="">
								贷款利息
							</view>
						</view>
						<view class="box" @tap="jumpTools(3)">
							<image src="../../static/lawer/lvshi.png" mode=""></image>
							<view class="">
								律师费
							</view>
						</view>
						<view class="box" @tap="jumpTools(4)">
							<image src="../../static/lawer/tianshu.png" mode=""></image>
							<view class="">
								天数
							</view>
						</view>
						<view class="box" @tap="jumpTools(5)">
							<image src="../../static/lawer/gongshang.png" mode=""></image>
							<view class="">
								工伤赔偿
							</view>
						</view>
						<view class="box" @tap="jumpTools(6)">
							<image src="../../static/lawer/jiaotong.png" mode=""></image>
							<view class="">
								交通人身赔偿
							</view>
						</view>
						<view class="box" @tap="jumpTools(7)">
							<image src="../../static/lawer/weiyue.png" mode=""></image>
							<view class="">
								违约金
							</view>
						</view>
						<view class="box" @tap="jumpTools(8)">
							<image src="../../static/lawer/baoquan.png" mode=""></image>
							<view class="">
								诉讼保全成本
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="box-c">
						<view class="box">
							<image src="../../static/lawer/susong.png" mode=""></image>
							<view class="">
								法律法规
							</view>
						</view>
						<view class="box">
							<image src="../../static/lawer/daikuan.png" mode=""></image>
							<view class="">
								判决案例
							</view>
						</view>
						<view class="box">
							<image src="../../static/lawer/lvshi.png" mode=""></image>
							<view class="">
								伤残鉴定机构
							</view>
						</view>
						<view class="box">
							<image src="../../static/lawer/tianshu.png" mode=""></image>
							<view class="">
								法院认可的诉保机构
							</view>
						</view>
						<view class="box">
							<image src="../../static/lawer/gongshang.png" mode=""></image>
							<view class="">
								案件记录
							</view>
						</view>
						<view class="box">
							<image src="../../static/lawer/jiaotong.png" mode=""></image>
							<view class="">
								开庭提醒
							</view>
						</view>
						<view class="box">
							<image src="../../static/lawer/weiyue.png" mode=""></image>
							<view class="">
								笔记备忘
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="box-line"></view>
		<view class="floor2">
			<view class="title">
				<view class="title-left">
					<image src="../../static/lawer/title_bg.png" mode=""></image>
					<view class="">
						服务
					</view>
				</view>
				<view class="more"></view>
			</view>
			<view class="box-c">
				<image src="../../static/image/banner.png" mode=""></image>（占位图片）
			</view>
		</view>
		<view class="box-line"></view>
		<view class="floor3">
			<view class="title">
				<view class="title-left">
					<image src="../../static/lawer/title_bg.png" mode=""></image>
					<view class="">
						接案
					</view>
				</view>
				<view class="more"></view>
			</view>
			<view class="box-c">
				<view class="left">
					<image src="../../static/image/banner.png" mode=""></image>
				</view>
				<view class="right">
					<view class="">
						<image src="../../static/image/banner.png" mode=""></image>
					</view>
					<view class="">
						<image src="../../static/image/banner.png" mode=""></image>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[
					{img:"../../static/image/banner.png"}
				]
			};
		},
		methods:{
			jumpTools(type){
				switch(type){
					case 1:
						uni.navigateTo({
							url:"/pages/L_tools/lawsuit_money"
						})
						break;
					case 2:
						uni.navigateTo({
							url:"/pages/L_tools/loan_interest"
						})
						break;
					case 3:
						uni.navigateTo({
							url:"/pages/L_tools/lawer_money"
						})
						break;
					case 4:
						uni.navigateTo({
							url:"/pages/L_tools/day_number"
						})
						break;
					case 5:
						uni.navigateTo({
							url:"/pages/L_tools/workcover"
						})
						break;
					case 6:
						uni.navigateTo({
							url:"/pages/L_tools/traffic"
						})
						break;
					case 7:
						uni.navigateTo({
							url:"/pages/L_tools/break_money"
						})
						break;
					case 8:
						uni.navigateTo({
							url:"/pages/L_tools/save_cost"
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
.banner{
	width: 100%;
}
.box-line{
	background-color: #eee;
	height: 15rpx;
}
.banner-bottom{
	padding: 15rpx;
	display: flex;
	align-items: center;
	font-size: 23rpx;
	color: #02C8FD;
	letter-spacing: 1rpx;
	image{
		width: 100rpx;
		height:35rpx;
	}
	.line{
		height: 25rpx;
		border-right: 1rpx solid #ccc;
		margin: 0 15rpx 0 10rpx;
	}
}
.floor1{
	padding: 10rpx;
	box-sizing: border-box;
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title-left{
			font-size: 26rpx;
			position: relative;
			top: 0;
			left: 0;
			image{
				width: 125rpx;
				height: 30rpx;
				margin: 10px 0 0 0;
			}
			view{
				position: absolute;
				top: 0;
				left: 20rpx;
				font-weight: 600;
			}
		}
		.more{
			border: 2rpx solid #ccc;
			border-radius:30px;
			font-size: 23rpx;
			padding: 5rpx 15rpx;
			margin: 2rpx 5rpx -2rpx 0;
		}
	}
	.box-c{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin: 5rpx 0;
		.box{
			width: 25%;
			padding: 15rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-wrap: wrap;
			font-size: 23rpx;
			image{
				width: 70rpx;
				height: 55rpx;
				margin: 10rpx 0 0 0;
			}
			view{
				height: 23rpx;
				text-align: center;
				width: 80%;
			}
		}
	}
}
.floor2{
	padding: 10rpx;
	box-sizing: border-box;
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title-left{
			font-size: 26rpx;
			position: relative;
			top: 0;
			left: 0;
			image{
				width: 125rpx;
				height: 30rpx;
				margin: 10px 0 0 0;
			}
			view{
				position: absolute;
				top: 0;
				left: 20rpx;
				font-weight: 600;
			}
		}
	}
	.box-c{
		padding: 10rpx;
		image{
			border-radius:10px;
			width: 300rpx;
			height: 150rpx;
		}
	}
}
.floor3{
	padding: 10rpx;
	box-sizing: border-box;
	.title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title-left{
			font-size: 26rpx;
			position: relative;
			top: 0;
			left: 0;
			image{
				width: 125rpx;
				height: 30rpx;
				margin: 10px 0 0 0;
			}
			view{
				position: absolute;
				top: 0;
				left: 20rpx;
				font-weight: 600;
			}
		}
	}
	.box-c{
		padding: 10rpx;
		display: flex;
		.left{
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius:10px;
			}
		}
		.right{
			margin: 0 0 0 10rpx;
			image{
				width: 500rpx;
				height: 93rpx;
				border-radius:10px;
			}
		}
	}
}
</style>
